<template>
  <div class="card-box">
    <!-- 这是使用原始方式 -->
    <!-- <p v-if="city === 'xian'">西安库存 <b>{{ $store.state.xian.count }}</b> 件，</p>
    <p v-if="city === 'chengdu'">成都库存 <b>{{ $store.state.chengdu.count }}</b> 件，</p> -->
    <p v-if="city === 'xian'">西安库存 <b>{{ xianCount }}</b> 件，</p>
    <p v-if="city === 'chengdu'">成都库存 <b>{{ chengduCount }}</b> 件，</p>
    物流：
    <select>
      <option :value="item" v-for="item in expressList" :key="item">
        {{ item }}
      </option>
    </select>
    <button class="pull-right" @click="doDeliverAsync(city, -1 )">异步 >></button>
    <button class="pull-right" @click="doDeliver(city, -1 )">发货 >></button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  props: {
    city: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 这里的数据是 data 中的，是私有数据，我们需要用 store 中的数据替换，所以把这里注释掉
      // xianCount: 100,
      // chengduCount: 80,
      expressList: ['ZT-中通', 'YT-圆通', 'SF-顺丰']
    };
  },
  computed: {
    // 这里需要从模块去映射，需要使用对象作为入参，使用 key value 的形式
    ...mapState({
      xianCount: state => state.xian.count,
      chengduCount: state => state.chengdu.count,
    })
  },
  methods: {
    // ...mapMutations(['xian/updateCount']),
    // 别名映射
    ...mapMutations({
      updateXianCount: 'xian/updateCount',
      updateChengduCount: 'chengdu/updateCount'
    }),
    // ...mapActions(['xian/deliver']),
    // 别名映射
    ...mapActions({
      xianDeliver: 'xian/deliver',
      chengduDeliver: 'chengdu/deliver'
    }),
    // 执行发货
    doDeliver(city, changedValue = -1) {
      if (city === 'xian') {
        // 1. 原始方式 调 mutation下面的 updateCount 方法
        // this.$store.commit('xian/updateCount', changedValue)
        // 2. 使用辅助函数
        // this['xian/updateCount'](changedValue) // 奇丑无比，懒得一批
        this.updateXianCount(changedValue);
      } else if (city === 'chengdu') {
        this.updateChengduCount(changedValue);
      }
    },
    // 异步发货
    doDeliverAsync(city, changedValue) {
      // 1. 使用原始方式
      // if (city === 'xian') {
      //   this.$store.dispatch('xian/deliver', changedValue)
      // } else if (city === 'chengdu') {
      //   this.$store.dispatch('chengdu/deliver', changedValue)
      // }
      // 2. 辅助函数方式
      if (city === 'xian') {
        this.xianDeliver(changedValue)
      } else if (city === 'chengdu') {
        this.chengduDeliver(changedValue)
      }
      // this['xian/deliver'](changedValue) 不推荐，很丑，很难看
    }
  },
};
</script>